<template>
  <div>
    <ZgDialog
      :width="view.width"
      :top="view.top"
      :title="view.title"
      :showFooter="view.showFooter"
      v-model="visible"
      @ok="onOk"
    >
      <div v-if="initLoading">
        正在初始化配置数据...
      </div>
      <div v-else>
        <div v-if="!hasInit">
          初始化配置数据失败
        </div>
        <div :style="{padding:`${layout.视图边距}px`}">
          <div>
            <span>环节名称：</span><span class="mr10">{{ recordObj.stepName }}</span><span>环节编号：</span><span>{{ recordObj.stepNo }}</span>
          </div>
          <a-tree
            v-model="checkedKeys"
            checkable
            :expanded-keys="expandedKeys"
            :auto-expand-parent="autoExpandParent"
            :selected-keys="selectedKeys"
            :tree-data="treeData"
            @expand="onExpand"
            @select="onSelect"
          />
        </div>
      </div>
    </ZgDialog>
  </div>
</template>
<script>
// import ZgTreeSelect from '@/comp/ZgTreeSelect.vue'

export default {

  data () {
    return {
      visible: false,
      hasInit: true,
      initLoading: false,
      layout: {
        视图边距: 0
      },
      recordObj: {},
      view: {
        width: '500px',
        top: '5%',
        title: '用户设置',
        showFooter: true
      },
      expandedKeys: ['1123'],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],

      treeData: [
        {
          title: '张三',
          key: '12133'

        },
        {
          title: '开发部',
          key: 'ces',
          children: [
            { title: '李四', key: '1123' },
            { title: 'ces', key: '0-1-0-1' },
            { title: 'cesada', key: '0-1-0-2' }
          ]
        },
        {
          title: '王五',
          key: '1213123'
        }
      ]

    }
  },
  mounted () {
  },
  methods: {

    open (record) {
      this.recordObj = record
      this.checkedKeys = record.personList
      this.visible = true
    },
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
    },
    onSelect (selectedKeys, info) {
      console.log('onSelect', info)
      this.selectedKeys = selectedKeys
    },
    onOk () {
      const param = {
        id: this.recordObj.id,
        personList: this.checkedKeys
      }
      this.$http.post('/zg-autoflow/autoFlow/step/updatePerson', param, (res) => {
        this.$message.success('设置成功')
        this.visible = false
        this.$emit('ok')
      })
    }

  }
}
</script>

<style lang="scss" scoped>
</style>
